/**
 * Collapse Component Style for tingle
 * @author 
 *
 * Copyright 2014-2016, Tingle Team.
 * All rights reserved.
 */

@font-face {
  font-family: 'iconfont';  /* project id 353381 */
  src: url('//at.alicdn.com/t/font_2rlrsccxhkf0f6r.woff') format('woff');
}

.{$prefix}-collapse {
  background-color: #fff;

  > .{$prefix}-collapse-item {
    border-top: 1px solid $normal-alpha-7;

    > .{$prefix}-collapse-header {
      height: 56px;
      line-height: 24px;
      padding: 16px;
      color: $dark-alpha-2;
      font-size: 16px;
      cursor: pointer;

      .arrow {
        display: inline-block;
        line-height: 0;
        position: relative;
        vertical-align: middle;
        float: right;
        margin-top: 12px;
        transition-duration: 0.3s;

        &:after {
          display: inline-block;
          font-family: 'iconfont';
          content: '\e65d';
          position: relative;
        }
      }

      .{$prefix}-icon {
        display: inline-block;
        vertical-align: top;
        margin-right: 12px;
      }

      &:active {
        background: $normal-alpha-7;

        .arrow {
          &:after {
            /* 如果半透明会叠加 */
            border-color: #e8ebee rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
          }
        }
      }
    }

    .{$prefix}-collapse-content {
      overflow: hidden;
      border-top: 1px solid $normal-alpha-7;
      color: #666;
      background-color: #fff;

      &-box {
        color: $dark-alpha-3;
        font-size: 14px;
        line-height: 22px;
      }

      &-inactive {
        display: none;
      }
    }

    &:first-child {
      border-top: none;
    }

    &-active > .{$prefix}-collapse-header .arrow {
      transform: rotateZ(-180deg);
      transform-origin: 50% 25%;
    }
  }

  &-anim-active {
    transition: height 0.3s ease-out;
  }
}